<template>
  <div class="axios-demo-container">
    <h2>Axios API Demo</h2>
    
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span>获取所有车辆数据</span>
          <el-button type="primary" @click="getAllCars">发送请求</el-button>
        </div>
      </template>
      <div class="response-container">
        <h4>响应数据：</h4>
        <pre>{{ getAllResponse }}</pre>
      </div>
    </el-card>
    
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span>添加新车辆</span>
          <el-button type="success" @click="insertCar">发送请求</el-button>
        </div>
      </template>
      <div class="form-container">
        <el-form :model="carForm" label-width="100px">
          <el-form-item label="车编号">
            <el-input v-model="carForm.carNum" placeholder="请输入车编号"></el-input>
          </el-form-item>
          <el-form-item label="品牌">
            <el-input v-model="carForm.brand" placeholder="请输入品牌"></el-input>
          </el-form-item>
          <el-form-item label="指导价">
            <el-input-number v-model="carForm.guidePrice" :precision="2" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label="生产日期">
            <el-date-picker v-model="carForm.produceTime" type="date" placeholder="选择生产日期" value-format="YYYY-MM-DD" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="车辆类型">
            <el-select v-model="carForm.carType" placeholder="请选择车辆类型" style="width: 100%">
              <el-option label="新能源" value="新能源"></el-option>
              <el-option label="燃油车" value="燃油车"></el-option>
              <el-option label="混动" value="混动"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="response-container">
        <h4>响应数据：</h4>
        <pre>{{ insertResponse }}</pre>
      </div>
    </el-card>
    
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span>获取单个车辆</span>
          <el-button type="primary" @click="getCar">发送请求</el-button>
        </div>
      </template>
      <div class="form-container">
        <el-form label-width="100px">
          <el-form-item label="车辆ID">
            <el-input v-model="carId" placeholder="请输入车辆ID"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="response-container">
        <h4>响应数据：</h4>
        <pre>{{ getCarResponse }}</pre>
      </div>
    </el-card>
    
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span>删除车辆</span>
          <el-button type="danger" @click="deleteCar">发送请求</el-button>
        </div>
      </template>
      <div class="form-container">
        <el-form label-width="100px">
          <el-form-item label="车辆ID">
            <el-input v-model="deleteId" placeholder="请输入要删除的车辆ID"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="response-container">
        <h4>响应数据：</h4>
        <pre>{{ deleteResponse }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// API基础URL
const baseURL = 'http://localhost:9999'

// 响应数据
const getAllResponse = ref('')
const insertResponse = ref('')
const getCarResponse = ref('')
const deleteResponse = ref('')

// 表单数据
const carForm = reactive({
  carNum: 'TEST001',
  brand: '测试品牌',
  guidePrice: 29.99,
  produceTime: '2023-03-15',
  carType: '燃油车'
})

// ID输入
const carId = ref('1')
const deleteId = ref('1')

// 获取所有车辆
async function getAllCars() {
  try {
    const response = await axios.get(`${baseURL}/getAllCars`)
    getAllResponse.value = JSON.stringify(response.data, null, 2)
    ElMessage.success('获取成功')
  } catch (error) {
    getAllResponse.value = `Error: ${error.message}`
    ElMessage.error('获取失败')
  }
}

// 添加车辆
async function insertCar() {
  try {
    const response = await axios.post(`${baseURL}/insertCar`, carForm)
    insertResponse.value = JSON.stringify(response.data, null, 2)
    ElMessage.success('添加成功')
  } catch (error) {
    insertResponse.value = `Error: ${error.message}`
    ElMessage.error('添加失败')
  }
}

// 获取单个车辆
async function getCar() {
  if (!carId.value) {
    ElMessage.warning('请输入车辆ID')
    return
  }
  
  try {
    const response = await axios.get(`${baseURL}/getCar/${carId.value}`)
    getCarResponse.value = JSON.stringify(response.data, null, 2)
    ElMessage.success('获取成功')
  } catch (error) {
    getCarResponse.value = `Error: ${error.message}`
    ElMessage.error('获取失败')
  }
}

// 删除车辆
async function deleteCar() {
  if (!deleteId.value) {
    ElMessage.warning('请输入车辆ID')
    return
  }
  
  try {
    const response = await axios.get(`${baseURL}/deleteCar/${deleteId.value}`)
    deleteResponse.value = JSON.stringify(response.data, null, 2)
    ElMessage.success('删除成功')
  } catch (error) {
    deleteResponse.value = `Error: ${error.message}`
    ElMessage.error('删除失败')
  }
}
</script>

<style lang="scss" scoped>
.axios-demo-container {
  padding: 20px;

  h2 {
    margin-bottom: 20px;
  }
  
  .demo-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .form-container {
      margin-bottom: 20px;
    }
    
    .response-container {
      background-color: #f5f7fa;
      padding: 10px;
      border-radius: 4px;
      
      pre {
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 200px;
        overflow-y: auto;
      }
    }
  }
}
</style> 